<template>
  <div class="wrapper">
    <minbar title="到店优惠" :isPadding="true"></minbar>
    <!-- 顶部的tab页 -->
    <x-filter :tabTitles="tabTitles" @itemClick="tabItemClick"></x-filter>
    <scroller show-scrollbar="flase" style="margin-top:1px;">
       <x-listpage :listData="listData"></x-listpage>
    </scroller>
    <x-popup :show="showMenu" pos="top" masktop="219" poptop="219" height="200" @popupClicked="closeMenu">
      <div slot="popup_content" class="popup_content">
        <div class="menu_div" 
          v-for="(v,index) in popItems" :key="index" 
            @click="changeClick(v,index)" >
              <text :class="['menu_title',v.select?'menu_title-active':'']" >{{v.title}}</text>
              <text class="menu_click_icon iconfont" v-if="v.select">&#xe671;</text>
        </div>
      </div>
    </x-popup>
  </div>
</template>

<script>
import asCore from "../../../common/js/core";
const navigator = weex.requireModule('navigator');
export default { 
  components: {
    "minbar" : require("../../../common/component/minbar.vue"),
    "x-filter" : require("../../../common/component/filter.vue"),
    "x-popup": require("../../../common/component/popup.vue"),
    "x-listpage": require("./comp/listPage.vue"),
  },
  data() {
    return {
      showMenu:false,
      tabTitles:[{
          title:"全国",
          isclick:false,
          showarrow:true
        },
        {
          title:"智能排序",
          isclick:false,
          showarrow:true
      }],
      popItems:[
        {
          title:"距离优先",
          code:"juli",
          select:false
        },
        {
          title:"活动优先",
          code:"huodong",
          select:false
        }
      ],
      listData:[
        {
          img:asCore.localpath + 'img/order/daodian.png',
          title:"老裁缝家纺(武汉分店)",
          phone:"13529061734",
          address:"武汉市江夏区江夏大道37号",
          range:"距您5.6km"
        },
        {
          img:asCore.localpath + 'img/order/daodian.png',
          title:"老裁缝家纺(上海分店)",
          phone:"13529061734",
          address:"上海市江夏区江夏大道37号",
          range:"满300减100"
        },
        {
          img:asCore.localpath + 'img/order/daodian.png',
          title:"老裁缝家纺(武汉分店)",
          phone:"13529061734",
          address:"武汉市江夏区江夏大道37号",
          range:"满送优惠券"
        },
        {
          img:asCore.localpath + 'img/order/daodian.png',
          title:"老裁缝家纺(武汉分店)",
          phone:"13529061734",
          address:"武汉市江夏区江夏大道37号",
          range:"满送优惠券"
        },
        {
          img:asCore.localpath + 'img/order/daodian.png',
          title:"老裁缝家纺(武汉分店)",
          phone:"13529061734",
          address:"武汉市江夏区江夏大道37号",
          range:"满送优惠券"
        },
        {
          img:asCore.localpath + 'img/order/daodian.png',
          title:"老裁缝家纺(武汉分店)",
          phone:"13529061734",
          address:"武汉市江夏区江夏大道37号",
          range:"满送优惠券"
        },
        {
          img:asCore.localpath + 'img/order/daodian.png',
          title:"老裁缝家纺(武汉分店)",
          phone:"13529061734",
          address:"武汉市江夏区江夏大道37号",
          range:"满送优惠券"
        }

      ]
    };
  },
  methods: {
    tabItemClick(isclick,index){
        if(index!=1) return;
        if(isclick==false){
            this.showMenu = true;
            this.tabTitles[index].isclick = true;
        }else{
            this.showMenu = false;
            this.tabTitles[index].isclick = false;
        }
    },
    closeMenu(){
        this.showMenu = false;
        this.$nextTick(()=>{
          this.tabTitles[1].isclick = false;
        });
    },
    changeClick(data,index){
      if(!data.select){
        for(var i=0;i<this.popItems.length;i++){
         this.popItems[i].select = false;
        }
        this.tabTitles[1].title = data.title;
        this.popItems[index].select = true;
      }else{
        this.popItems[index].select = false;
        this.tabTitles[1].title = "智能排序";
      }
      this.showMenu = false;
      this.tabTitles[1].isclick = false;

    }
  }
};
</script>
<style scoped>
.iconfont {
  font-family:iconfont;
}
.wrapper {
  background-color: #dedfe1;
}
.right-title {
  color: #fff;
  font-size: 32px;
}
.popup_content {

}
.menu_div {
  width: 750px;
  height: 90px;
  padding-left: 40px;
  padding-right: 40px;
  flex-direction: row;
  justify-content: space-between;
}

.menu_div:active {
  background-color: #eee;
}
.menu_title {
  font-size: 32px;
  line-height: 90px;
  color: #1f1e24;
}
.menu_title-active {
  color:#887243;
}
.bottom_border {
  margin-left: 40px;
}
.menu_click_icon {
  font-size: 30px;
  line-height: 90px;
  align-items: flex-end;
  color:#887243;
}
.x-content {
  padding:20px;
  border-bottom-color: #dedfe1;
  border-bottom-width: 1px;
}
</style>

